import React, { Component } from 'react';
import { connect } from 'dva';
import { handlerMatomoEvent } from '@/utils/matomo';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import GroupMonitoring from './GroupMonitoring';
import ProjectTable from '../components/ProjectTable';
import styles from '../index.less';

@connect(state => ({
  projectIndexUsingItems: state.Workbench.projectIndexUsingItems, // 工作台 项目指标数据
  remindItems: state.Workbench.remindItems, // 待办提醒的数据
  dynamicItems: state.Workbench.dynamicItems, // 最新动态的数据
  projectUnderwayList: state.Workbench.projectUnderwayList, // 正在进行
  projectName: state.Workbench.projectName,
}))
export class index extends Component {
  state = {
    workbenchUrlParams: {},
    loading1: true,
    loading2: true,
    loading3: true,
  };

  componentDidMount() {
    const { dispatch, location } = this.props;
    const { projectId } = location.query;
    dispatch({
      type: 'Workbench/requestProjectList',
      payload: {
        params: { projectId },
      },
      callback: () => {
        this.setState({ loading1: false });
      },
    });
    {
      const params = {
        projectId,
        current: '1',
        pageSize: '10',
        stagesId: '',
        state: '',
        typeId: '',
      };
      dispatch({
        type: 'Workbench/requestRemindData',
        payload: {
          params,
        },
        callback: () => {
          this.setState({ loading2: false });
        },
      });
    }
    {
      const params = {
        projectId,
        current: '1',
        pageSize: '10',
        begin: '',
        end: '',
        eventId: '',
        moduleTypeId: '',
        operationBy: '',
        stagesId: '',
        typeId: '',
      };
      dispatch({
        type: 'Workbench/requestDynamicData',
        payload: {
          params,
        },
        callback: () => {
          this.setState({ loading3: false });
        },
      });
    }
    // 工作台 项目埋点
    const params = {
      category: 'Page',
      action: '工作台-项目',
      name: '工作台-项目',
    };
    handlerMatomoEvent(params);
  }

  render() {
    return (
      <div className={styles.workbench}>
        <div className="project">
          <PageHeaderWrapper
            breadcrumb={null}
            title={unescape(this.props.location.query.projectName)}
          >
            <GroupMonitoring {...this.props} />
            <ProjectTable
              {...this.props}
              workbenchUrlParams={this.state.workbenchUrlParams}
              {...this.state}
            />
          </PageHeaderWrapper>
        </div>
      </div>
    );
  }
}

export default index;
